import React from "react";
import { BreadcrumbProps } from "./breadcrumb";
import classNames from "classnames";

export interface BreadcrumbItemProps {
    to?: { path: string }
}

export type BreadcrumbItemType = BreadcrumbItemProps & BreadcrumbProps;

const BreadcrumbItem: React.FC<BreadcrumbItemType> = (props) => {

    const { separatorClassName, separator, children, to } = props;

    const jumpPage = () => {
        to && to.path && (window.location.href = to.path);
    }

    const iconClasses = classNames('iconfont', separatorClassName);

    if (separatorClassName) {
        return <div className={'yulang-breadcrumb-item-container'} onClick={jumpPage}><i className={iconClasses}></i>{children}</div>
    } else if (separator) {
        return <div className={'yulang-breadcrumb-item-container'} onClick={jumpPage}>{separator}{children}</div>
    }else {
        return <div className={'yulang-breadcrumb-item-container'}>{children}</div>
    }

}

BreadcrumbItem.displayName = 'BreadcrumbItem';

BreadcrumbItem.defaultProps = {

}

export default BreadcrumbItem;